<template>
  <div class="ContractTemplate">
    <div class="CM_top flex justify-between items-center mb-10px">
      <el-button class="bt_blue"
        ><svg-icon icon-class="add"></svg-icon
        ><span class="ml-4px">创建模版</span></el-button
      >
      <div class="Top_search_box">
        <el-input placeholder="搜索模版名称/创建人" v-model="value">
          <svg-icon icon-class="search" slot="suffix" />
        </el-input>
      </div>
    </div>
    <div class="my_search -ml-20px">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        class="search_form"
        labelPosition="left"
      >
        <el-form-item label="模版类型：" prop="region">
          <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="模版状态：" prop="region">
          <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="创建时间：" prop="region">
          <el-date-picker
            v-model="ruleForm.time"
            type="date"
            :clearable="false"
            placeholder="选择日期"
          >
          </el-date-picker>
        </el-form-item>
      </el-form>
      <div class="submit_clear">
        <el-button class="bt_gray">查询</el-button>
        <el-button class="bt_White">清空</el-button>
      </div>
    </div>
    <div class="content">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="date" label="模版名称"> </el-table-column>
        <el-table-column prop="name" label="模版编号"> </el-table-column>
        <el-table-column prop="address" label="模版类型"> </el-table-column>
        <el-table-column prop="address" label="是否可用">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.switchvalue"
              active-color="#1D6FE9"
              inactive-color="#C2C2C2"
            >
            </el-switch> </template
        ></el-table-column>
        <el-table-column prop="address" label="创建人"> </el-table-column>
        <el-table-column prop="address" label="创建时间"> </el-table-column>
        <el-table-column prop="address" label="操作">
          <template slot-scope="scope">
            <div class="but_list">
              <el-button type="text" size="small">下载</el-button>
              <el-button type="text" size="small" class="ml-16px"
                >编辑</el-button
              >
            </div>
          </template></el-table-column
        >
      </el-table>
    </div>
    <Pagination :total="300"></Pagination>
  </div>
</template>

<script>
import Pagination from "@/components/Pagination";
export default {
  components: {
    Pagination,
  },
  data() {
    return {
      value: "",

      ruleForm: { time: "", region: "" },
      rules: {},
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
          switchvalue: true,
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
          switchvalue: false,
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
          switchvalue: true,
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
          switchvalue: false,
        },
      ],
    };
  },
};
</script>

<style lang="scss" scoped>
.ContractTemplate {
  .my_search {
    display: flex;
    justify-content: space-between;
  }
  .submit_clear {
    display: flex;
  }
  .content {
    background: #ffffff;
    border: 1px solid #f0f0f0;
    border-bottom: 0;
    .but_list {
      display: flex;
      ::v-deep .el-button--text {
        line-height: 20px;
        span {
          justify-content: left;
          color: #1d6fe9;
        }
      }
    }
  }
}
</style>
